<template>
	<view>
			<view class="billNotDone-item" v-for="(item, index) in olist" :key="index">
				<view class="billNotDone-item-top">
					<view class="flex">
						<view class="">
							<checkbox-group v-if="[3,10,20,30,39].indexOf(item.status)" style="display: inline-block;" @change="select($event, item)">
								<label>
									<checkbox :value="checked" :checked="checked" @click="handleClick" />
								</label>
								<label>
								</label>
							</checkbox-group>
							<view class="" style="display: inline-block;">{{ item.which_period }}/{{ length }}</view>
						</view>
						<view class="">未支付</view>
					</view>
				</view>
				<view class="divider"></view>
				<view class="billNotDone-item-bottom">
					<view class="flex">
						<view class="">扣款金额</view>
						<view class="text-color">{{ item.rent }}元</view>
					</view>
					<view class="flex">
						<view class="">预计扣款时间</view>
						<view class="text-color">{{ item.begin_time }}</view>
					</view>
					<view class="flex">
						<view class="">租期时间</view>
						<view class="text-color">{{ item.lease_time }}</view>
					</view>
				</view>
			</view>
<!-- 		<view class="" v-if="[3,10,20,30,39].indexOf(item.status)">
			<button v-if="goBuy==true" @click="goPay" :disabled="goBuy">{{buyBtn}}{{total}}元</button>
			<button v-else @click="goPay" :disabled="goBuy" style="background-color: #F72020;color: #fff;">{{buyBtn}}{{total}}元</button>
		</view> -->
		<!-- 普通弹窗 -->
		<uni-popup ref="popup" background-color="#fff">
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<uni-section title="请选择支付银行卡" type="line">
				      <uni-data-select
				        :localdata="uniCode"
				        @change="change"
				      ></uni-data-select>
				    </uni-section>
				<uni-section title="请输入验证码" type="line">
					<input type="number" placeholder="请输入验证码" :value="payCode" @input="handlepayCode" style="border: solid 1px #e5e5e5;height: 65rpx;width: 400rpx;">
					<button class="code_btn" :disabled="isSend1" @click="handleCode">{{codeName}}</button>
				</uni-section>
				<view class="" style="margin-top: -25rpx;">
					<button type="default" @click="goPay1">确认支付</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { readyPay,confirmPay,getOrderLease } from '@/api/order.js'
	export default {
		name: "billNotDone",
		// props: ['order','olist'],
		props:{
			order:{
				type:String,
				defalut:''
			},
			olist:{
				type:Array,
			}
		},
		onLoad(options) {
		},
		onShow() {
		},
		data() {
			return {
				id:'',
				length: null,
				checked: false,
				list:[],
				total:0,
				selected:[],
				uniCode:[],
				unique_code2:'',
				unique_code3:'',
				makePrice:'',
				codeName:'获取验证码',
				totalTime1: 60,
				isSend1: false, //禁用
				timer: '', //定时器
				payCode:'',
				goBuy:true,
				buyBtn:'去支付，共'
			};
		},
		created(options) {
			console.log(this.orderList);
			const list = uni.getStorageSync("uniqueCode");
			this.uniCode=list
			console.log(this.id);
			getOrderLease(this.id).then(res=>{
				console.log(res);
			})
		},
		methods: {
			select(e, item) {
				if(e.detail.value!=''){
					this.total=0
					this.list.push(item)
				}else if(e.detail.value==''){
					this.total=0
					this.list.forEach((value,index,array)=>{
						if(value.id==item.id){
							array.splice(index,1)
						}
					})
				}
				this.list.forEach(item=>{
					this.selected.push(item.id)
					this.total+=parseFloat(item.rent)
					this.goBuy=false
				})
				console.log(this.total);
			},
			handleClick(e){
			},
			handlepayCode(e){
				console.log(e);
				this.payCode=e.detail.value
			},
			checkedChange(e){
				this.checked=!this.checked
			},
			goPay(){
				this.type = 'center'
				this.$refs.popup.open(this.type)
			},
			goPay1(){
				if(this.payCode==''){
					uni.showToast({
						title:"请先输入验证码",
						icon:'error'
					})
					return
				}
				let data1={
					leaseId:this.selected,
					orderId:this.order,
					unique_code3:this.unique_code3,
					code:this.payCode
				}
				confirmPay(data1).then(res=>{
					console.log(res);
					if(res.status==200){
						uni.showToast({
							title:"支付成功",
							icon:'success'
						})
					}else{
						uni.showToast({
							title:res.msg,
							icon:'error'
						})
					}
					this.$refs.popup.close()
				})
			},
			change(e){
				this.unique_code2=e
			},
			handleCode(){
				let data={
					unique_code2:this.unique_code2,
					txn_amt:this.total*100,
					orderId:this.order
				}
				if(this.unique_code2==''){
					uni.showToast({
						title:"请先选择银行卡",
						icon:'error'
					})
					return
				}
				readyPay(data).then(res=>{
					this.unique_code3=res[0]
					this.makePrice=res[1]
				})
				this.isSend1 = true
				this.codeName = this.totalTime1 + 's后重新发送'
				this.timer1 = setInterval(() => {
					this.totalTime1--
					this.codeName = this.totalTime1 + 's后重新发送'
					if (this.totalTime1 < 0) {
						clearInterval(this.timer1)
						this.codeName = '重新发送验证码'
						this.totalTime1 = 60
						this.isSend1 = false
					}
				}, 1000)
			},
		}
	}
</script>

<style scoped>
	.billNotDone-item {
		background-color: #fff;
		border-radius: 10rpx;
		font-size: 25rpx;
		line-height: 2rem;
		margin-top: 20rpx;
		padding: 0 20rpx;
	}

	.text-color {
		color: #999;
		font-size: 20rpx;
	}

	.divider {
		width: 100%;
		height: 1rpx;
		background-color: #eee;
	}

	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.popup-content{
		width:700rpx;
		height: 450rpx;
	}
	.popup-content1{
		width: 400rpx;
		height: 400rpx;
	}
	.code_btn{
		 position: relative;
		 left: 200rpx;
		 bottom: 70rpx;
		 height: 70rpx;
		 width: 250rpx;
		 font-size: 30rpx;
	}
	.btnCls2{
		background: #F72020;
		color: #fff;
	}
</style>
